<!-- global-menu/DynamicMenu.vue - 动态菜单分发器 -->
<template>
  <!-- 🎯 根据布局模式选择对应的菜单组件 -->
  <component 
    :is="currentLayoutMenuComponent" 
    :config="menuConfig"
    :use-dynamic="true"
    :menu-data="menuData"
  />
</template>

<script setup>
import { computed } from 'vue'
import { useRouteStore } from '@/stores/modules/route'
import VerticalMenu from './modules/VerticalMenu.vue'
import HorizontalMenu from './modules/HorizontalMenu.vue'
import VerticalMixMenu from './modules/VerticalMixMenu.vue'
import HorizontalMixMenu from './modules/HorizontalMixMenu.vue'

// 🎯 Props
const props = defineProps({
  layoutMode: {
    type: String,
    required: true
  },
  menuConfig: {
    type: Object,
    default: () => ({})
  }
})

// 🎯 获取动态路由数据
const routeStore = useRouteStore()
const menuData = computed(() => {
  const menuTree = routeStore.menuTree
  // 转换为菜单组件需要的格式
  const transformedData = transformMenuData(menuTree)
  console.log('🔍 [DynamicMenu] 原始菜单数据:', menuTree)
  console.log('🔍 [DynamicMenu] 转换后菜单数据:', transformedData)
  return transformedData
})

/**
 * 转换菜单数据格式
 * 后端格式 -> 前端菜单格式
 */
function transformMenuData(routes) {
  if (!routes || !Array.isArray(routes)) return []
  
  return routes.map(route => {
    const menuItem = {
      key: route.name?.toLowerCase() || route.path.replace(/\//g, '_'),
      label: route.meta?.title || route.name,
      path: route.path,
      icon: route.meta?.icon || 'Document'
    }
    
    // 递归处理子菜单
    if (route.children && route.children.length > 0) {
      menuItem.children = transformMenuData(route.children)
    }
    
    return menuItem
  })
}

// 🎯 布局菜单组件映射（核心！）
const layoutMenuMap = {
  'vertical': VerticalMenu,
  'horizontal': HorizontalMenu,
  'vertical-mix': VerticalMixMenu,
  'horizontal-mix': HorizontalMixMenu
}

// 🎯 当前布局对应的菜单组件
const currentLayoutMenuComponent = computed(() => {
  const component = layoutMenuMap[props.layoutMode]
  
  if (!component) {
    console.warn(`❌ 未找到 ${props.layoutMode} 对应的菜单组件，使用默认垂直菜单`)
    return VerticalMenu
  }
  
  console.log(`🎯 使用动态菜单组件: ${component.__name || props.layoutMode}`)
  return component
})
</script>

<style scoped>
/* 分发器不需要样式 */
</style>
